<template>
	<view class="head">
		<view class="avatar-container">
			<view style="display: flex;">
				<image class="avatar" src="/static/logo.png" mode="aspectFill" />
				<view class="login">
					<text class="tips">Hi~<text v-if="isLogin">{{userName}}</text>,欢迎回来</text>
					<button v-if="!isLogin" class="login-btn" @click="login">登录</button>
										<button v-if="isLogin" class="login-btn" @click="outLogin">退出</button>
				</view>
			</view>
			
			<view class="follow-topic">
				<view>
					关注 3
				</view>
				<view>
					|
				</view>
				<view>话题 0</view>
			</view>
		</view>
	</view>
	
<!-- 	<view class="fun-container">
		<view>
			收藏
		</view>
		<view>
			历史
		</view>
		<view>
			设置
		</view>
	</view> -->
</template>

<script>
	export default {
		data() {
			return {
				isLogin:true,
				userName:""
			}
		},
		onShow() {
			let userName = uni.getStorageSync("account")
			if(userName){
				uni.setTabBarItem({
					index:3,
					text:"我的"
				})
				this.userName = userName;
				this.isLogin = true;
			}else{
				uni.setTabBarItem({
					index:3,
					text:"未登录"
				})
				this.isLogin = false;
			}
			
		},
		methods: {
			login(){
				uni.navigateTo({
					url:"/pages/login/login",
				})
			},
			outLogin(){
				uni.clearStorageSync();
				uni.navigateTo({
					url:"/pages/login/login",
				})
			}
		}
	}
</script>

<style>
.head{
	width: 100%;
	height: 200rpx;

	display: flex;
	justify-content: center;
}
.avatar-container{
	width: 95%;

	display: flex;
	flex-direction: column;
	
}
.avatar{
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
}
.tips{
	font-weight: bold;
	color: black;
	margin-left: 10rpx;
}

.login-btn{
	background-color: indianred;
	color: white;
	width: 120rpx;
	height: 40rpx;
	font-size: 14rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 30rpx;
	margin-left: 10rpx;
	margin-top: 10rpx;
}

.follow-topic{
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-top: 20rpx;
}
</style>